<? if(! empty($customer_comments)): ?>
	<div id="customers">
		<ul>
			<? foreach($customer_comments as $comment): ?>
			<li>
				<a href="/komentari">
					<?= $this->Html->image("customers/" . $comment['CustomerComment']['image'] . "?h=80") ?>
					<blockquote><?= $comment['CustomerComment']['comment'] ?></blockquote>
					<p><?= $comment['CustomerComment']['name'] ?>, <?= $comment['CustomerComment']['company'] ?></p>
				</a>
			</li>
			<? endforeach; ?>
		</ul>
	</div>
	
	<script type="text/javascript">
	$(function(){
		var ul = $('#customers ul');
		ul.data("position", 0);
		centerLi(ul.children('li').eq(0), true);
		if(ul.find('li').length>1) {
			CustomersSlideshow(ul);
		}
	});
	
	function CustomersSlideshow(ul) {
		var pos = ul.data("position");
		var lis = ul.children("li");
	
		setTimeout(function(){
			var current = lis.eq(pos);
	
			pos += 1;
			if(pos >= lis.length) {
				pos = 0;
			}
			var next = lis.eq(pos);
	
			ul.data("position", pos);
			
			// hide current
			current.fadeOut('slow');
			
			// show next
			centerLi(next);
			next.fadeIn('slow', function(){
				CustomersSlideshow(ul);
			});
		}, 5000);
	}
	function centerLi(li, visible) {
		var visible = !!visible;
		var bq = li.find('blockquote');
		var ul = li.parent();
		var w2 = ul.width();
		
		if (! visible) {
			li.show();
		}
		var w = bq.width() + 105;
		if (! visible) {
			li.hide();
		}
		li.css({
			width: w,
			left: (w2-w)/2	
		});
	}
	</script>
<? endif ?>